webpack-merge 的用法
在实际开发中，开发环境和生产环境提供了两份配置文件，绝大多数的配置都是相同的，差异仅仅体现在mode: 为 development 或 production在 development 环境需要配置 devServer，和为 devServer 注入 html 所使用的 plugins.HTMLWebpackPlugin通过 webpack-merge 可以将基础的配置抽象到 webpack.base.js 中，开发环境和线上环境分...
2024-01-10
webpack vue 配置
vue-loader 1.)首先创建项目目录 --vue-loader文件夹 |-index.html 入口文件 |-main.js 入口文件 |-App.vue Vue文件 |-package.json 工程文件 |-webpack.config.js webpack 配置文件 2.)基于webpack模块化开发ES6 关...
2024-01-10
webpack vue 的一些笔记
1、开发过程中使用异步组件（提高性能）当app.js（几m）太大的时候才需要异步组件 第一种： 在route.js文件中 routes:[{ path:'/nav', name:'Nav', component:()=> import('xxx/xxx/Nav')}] 第二种 xxx.vue文件中注册组件的时候异步 components:{ ...
2024-01-10
vue 一些webpack的配置详解
最近一直在忙着做项目 本来想养成一个经常跟新博客的习惯 ， 但是实在是太难了 ， 每天加班到10点多 。8点能下班都是最好的了 ， 小公司真不好待呀分享一下最近半年的vue心得吧我的项目是在他的基础上改的PanJiaChen/vueAdmin-templatevuex 咋web上我觉得是鸡肋 ， 用户刷新页面直接就没了。。。。。...
2024-01-10
webpack处理vue中render函数内容时报错
打包组件的时候报错，提示需要别的loader来处理render函数中的内容。但是我不是很理解，我已经用了vue-loader了。。。求大神指点。。。报错内容：ERROR in ./components/lib/tag/src/tag.vue?vue&type=script&lang=js& (./node_modules/vue-loader/lib??vue-loader-options!./c...
2024-03-14
在webpack react项目中使用scss
create-react-app版本：1.5.21、首先安装sass-loader node-sassnpm install sass-loader node-sass —save-dev2、运行npm run eject这时候会生成配置文件3、找到config文件里的webpack.config.dev.jswebpack.config.prod.js里的css配置也要修改，修改内容同webpack.config.dev.js找到module里的css配置部分，修改正则匹配为：/\.(css|scss)$...
2024-01-10
webpack 与 vue 打包体积优化
在使用vue开发时，遇到打包后单个文件太大，因而需要分包，不然加载时间太久。虽然尽可能减少请求次数，但是单个包太大也不是好事思路组件按需加载vue-router 的懒加载第三方包分离代码分割时，组件按需加载现在ui库大多都是以组件的形式进行处理，因而不用将整个库都导入，只需导入...
2024-01-10
webpack+react+redux+es6开发模式
一、预备知识 node, npm, react, redux, es6, webpack二、学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入门教程 redux middleware 详解 Redux研究 React 入门实例教程 webpack学习demo NPM 使用介绍三、工程搭建 之前有写过 1.可以npm init, 创建一个新的工程。创建packa...
2024-01-10
vue项目，webpack中配置src路径别名及使用
1、项目结构：2、在build文件夹下的webpack.base.conf.js文件中设置src的路径别名。3、在js文件或者vue文件的script标签中使用：（1）、js文件中导入示例：（2）、vue文件中导入示例：4、css（scss）文件在scss或者vue的style标签中导入示例：（1）、在scss文件中导入示例：（2）、在vue的style标签中导入示例：...
2024-01-10
使用dvajs+webpack构建react开发环境
之前我有写过博文介绍过dva.js及其用法，dva.js固然是个非常优秀的框架，但是如果用dev-cli来创建的话就会默认绑定使用roadhog而不是webpack。鉴于roadhog的文档要明显少于webpack，如果能使用webpack+dvajs的话使用起来应该会轻松些。本文大致来介绍下dvajs+webpack3.11.0 开发环境的搭建过程。首先先贴上package.json...
2024-01-10
vue+webpack实现异步组件加载
8.9更新：之前想搬迁到csdn的时候由于邀请码问题迟迟没把博客转过来，所以跑去博客园了，今天发现csdn已经帮我把文章搬过来，有必要修正一下这篇文章。写这篇文章的时候因为刚接触vue，所以捣鼓的时候有些迷糊。...
2024-01-10
react+webpack开发环境配置
react是目前非常热门的前端框架，提倡组件化开发。所谓的组件，简单理解，就是一个独立的页面部件（包括页面模版，样式，逻辑等），它是一个独立的整体。 webpack，是一个模块打包工具，其主要功能，就是将浏览器端无法识别的代码，通过各种loader和plugin，生成浏览器可用的代码。比如...
2024-01-10
【Vue】webpack引入iview运行出错
使用webpack新建Vue项目，Vue正常引入可以运行，但是当我引入iview并试图打包的时候，报了一大堆错误。。看了一下，都是css出错了：webpack配置如下：/*公共配置文件*/const path = require('path')const webpack = require('webpack')const HtmlWebpackPlugin = require('html-webpack-plugin')const VueLoaderPlugin = require('vue-loader/...
2024-01-10
vue 项目配置webpack代理服务，不生效
我用的是vue2.5,webpack版本是3.6，我如下配置了dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', // Various Dev Server settings host: '192.168.31.91', // can be overwritten by ...
2024-02-18
react暴露其webpack配置，使less文件生效
在react使用中，纯原生状态下要去使用less文件比较麻烦，一般只支持.css文件；ps: 注意在修改前， 要先安装好less-loader，不然会报错的（1）、使用 yarn eject 可以暴露其webpack的配置，让.less文件生效修改样式；使用yarn eject后，可能会报这个错误：那是因为没有初始化本地项目，git init git add . ...
2024-01-10
【Vue】vue-cli webpack css中的图片路径问题
我使用vue-cli中的webpak模板，在.vue文件中我在css中引用图片template中引用一张style的css中引用一张目录结构如图app.vuehello.vue当我npm run build后 多了个dist,如果我进入dist目录anywhere启动服务器 那么地址是 http://192.168.10.13:8000/#/ 此时 两张图片正常css:.hello[data-v-2e7268e9] {width: 200px;height: 200px;background: ur...
2024-01-10
vue+webpack+vue-router+vuex+ssr全解析笔记
前端开发一起交流QQ群：7400342881、vue基础知识： 1.1 实例化vue：方法1：new Vue({ el: '#app', //html中被替换的的标签，即挂载到html中#app标签里面 components: { App }, template: '<App/>'})方法2：const root=new Vue({ components: { App }, template: '<App/>', data:{ tex...
2024-01-10
使用vue脚手架工具搭建vue-webpack项目
对于Vue.js来说，如果你想要快速开始，那么只需要在你的html中引入一个<script>标签，加上CDN的地址即可。但是，这并不算是一个完整的vue实际应用。在实际应用中，我们必须要一系列的工具，包括：模块化，转译，预处理，热加载，静态检测和自动化测试等。对于一个需要长期维护和大型的项目而言，...
2024-01-10Vue+iview+webpack ie浏览器兼容简单处理
环境介绍：vue: ^2.5.2iview: ^3.1.0Webpack: ^3.8.1前情提要：ie 浏览器不支持 ES6 Promise 的语法。ie8 及以下对 html5 标签不兼容（可以通过引入html5shiv包解决，本文不处理IE11的更低版本，故不提及此法）。ie9 以下 对 CSS3 的不兼容，各种不兼容的细节比较多，这里不说明。ie10 及以下浏览器中不支持 dataset...
2024-01-10
【React】webpack require 路径 可以用变量吗？
问题：webpack require 路径 可以用变量吗？需求：由于需要动态的请求一些 JS脚本，路径是 一个变量，在 react+webpack 开发中，有办法 有 require 去加载一个 动态路径的 脚本？var popWinPath = '../../js/window.js';var Win = require(popWinPath)console.log('Win', Win, popWinPath)已经找到解决的办法// 文件变量var popWinPath = 'js/...
2024-01-10使用webpack打包后的vue项目如何正确运行（express）
我们知道使用webpack打包vue项目后会生成一个dist文件夹，dist文件夹下有html文件和其他css、js以及图片等，那么打包后的文件该如何正确运行呢？ 倘若直接打开html文件，会报如下错误： 那么该如何运行呢？其实可以将生成的dist文件部署到express服务器上运行。 （1）、安装expr...
2024-01-10
Vue2+webpack+node 配置+入门+详解
1.vue2.0 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层采用单文件组件复杂大型单页应用程序（SPA）响应式的数据绑定，与组件化的开发HTML中的DOM与其他的部分独立开来划分出一个层次，这个层次就叫做视图层 2.WebpackWebpack是一个前端打包和构建...
2024-01-10vue webpack打包后图片路径错误的完美解决方法
项目用run dev build 打包后，发现很多图片都不显示，在本地是没有问题的啊！找原因发现通过webpack+vuecli默认打包的css、js等资源，路径都是绝对的。因为我们的图片路径都是经历过文件夹的，在本地引用图片是绝对路径，但打包后因为把配置的static文件夹当成了根路径，所以很多图片找不到都不显示...
2024-01-10
vue、gulp、webpack踩过的坑和笔记
1.监听流错误 stream-combiner22.热更新Browsersync与element冲突，换成gulp-connect3.gulp-uglify压缩js不能压缩es64.使用vue-cli 运行npm run build --report 可以输出构建情况 浏览器自动访问 http://127.0.0.1:88885.在使用vue-cli创建项目时，git中use arrow keys选项在windows中 keys为序号，比如输入1然后按enter会选择第一个，依次类...
2024-01-10
vue-cli+webpack进行后台数据模拟？
1. 其中mock数据为data.json ，在文件的根目录位置。2. 配置webpack.dev.conf.js，文件所在位置如图在build文件夹下在文件头部添加如下代码const express = require('express')const app = express()const appData = require('../data.json')const seller = appData.sellerconst goods = appData.goodsconst ratings = app...
2024-01-10
